<template>
  <div>
    <div style="margin:10px 5px; ">
      <el-input style="width:200px;margin-right: 5px;" suffix-icon="el-icon-search" v-model="username" placeholder="请输入名称"></el-input>
      <el-input style="width:200px;margin-right: 5px;" suffix-icon="el-icon-message" v-model="email" placeholder="请输入邮箱"></el-input>
      <el-input style="width:200px;margin-right: 5px;" suffix-icon="el-icon-message" v-model="address" placeholder="请输入地址"></el-input>
      <el-button type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <div style="margin:20px 5px; ">
      <el-button type="primary" @click="handleAdd">新增&nbsp;<i class="el-icon-circle-plus-outline"></i></el-button>
      <el-button type="danger" @click="delbatch">批量删除&nbsp;<i class="el-icon-remove-outline"></i></el-button>
      <el-upload action="http://localhost:9090/user/import" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block;  margin-left: 10px;">
        <el-button type="primary">导入&nbsp;<i class="el-icon-plus"></i></el-button>
      </el-upload>
      <el-button style="margin-left: 10px;" type="primary" @click="exp">导出&nbsp;<i class="el-icon-minus"></i></el-button>
    </div>
    <el-table border :data="tableData" :header-cell-style="{background:'#eef1f6',color:'#606266'}" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="80" align="center">
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="130" align="center">
      </el-table-column>
      <el-table-column prop="role" label="角色" align="center" width="130">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium" type="success" v-show="scope.row.role=='ROLE_VISITORS'">{{ scope.row.role }}</el-tag>
            <el-tag size="medium" v-show="scope.row.role=='ROLE_ADMIN'">{{ scope.row.role }}</el-tag>
            <el-tag size="medium" type="danger" v-show="scope.row.role=='ROLE_USER'">{{ scope.row.role }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" width="130" align="center">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="电话" width="180" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="success" size="mini"><i class="el-icon-edit"></i> 编辑</el-button>
          <el-button @click="del(scope.row.id)" type="danger" size="mini"><i class="el-icon-delete"></i> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding-top: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 15, 20, 35]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" center width="30%">
      <el-form :model="form" :rules="rules" ref="form" size="small">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select clearable v-model="form.role" placeholder="请选择角色" style="width: 100%">
            <el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.flag"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
          <el-input v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth" prop="address">
          <el-input type="textarea" v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clear">取 消</el-button>
        <el-button type="primary" @click="save('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'User',
  data () {

    return {
      roles: [],
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      form: {
        username: "",
        nickname: "",
        email: "",
        phone: "",
        address: ""
      },
      input: "",
      username: "",
      email: "",
      address: "",
      dialogFormVisible: false,
      formLabelWidth: "80px",
      title: "新增用户",
      multipleSelection: [],

      rules: {
        username: [
          { required: true, message: "请输入账户名", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" }
        ],
        nickname: [
          { required: true, message: "请输入昵称", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11位数的手机号码", trigger: "blur" },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: "请输入正确的号码格式", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
        ]
      }
    };
  },
  created () {
    this.load();
  },
  methods: {
    //导入
    handleExcelImportSuccess () {
      this.$message.success("导入成功")
      this.load()
    },
    //导出
    exp () {
      this.openLoading()
      window.open("http://localhost:9090/user/export")
    },
    //查询数据
    load () {
      this.request.get("/user/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.username,
          email: this.email,
          address: this.address,
        }
      }).then(res => {
        // console.log(res.data);
        // 注意data
        this.tableData = res.data.records
        this.total = res.data.total

      })
      this.request.get("/role").then(res => {
        this.roles = res.data
      })
    },
    //新增
    save (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.request.post("/user/save", this.form).then(res => {
            if (res.data) {
              this.$message.success("保存成功")
              this.dialogFormVisible = false
              this.load()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    //编辑
    handleEdit (row) {
      this.form = row;
      this.dialogFormVisible = true;
      this.title = "编辑用户";
    },
    //删除
    del (id) {
      this.request.delete("/user/" + id).then(res => {
        this.$confirm("确认删除此用户嘛, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          if (res.data) {
            this.$message.success("删除成功");
            this.load();
          }
          else {
            this.$message.error("删除失败");
          }
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      });
    },

    //批量删除
    handleSelectionChange (val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //点击批量删除的时候
    delbatch () {
      let ids = this.multipleSelection.map(r => r.id); // [{},{},{}]把对象数组变成纯ID数组 [1,2,3]
      this.request.post("/user/del/batch", ids).then(res => {
        this.$confirm("你确定批量删除这些数据嘛, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          if (res.data) {
            this.$message.success("批量删除成功");
            this.load();
          }
          else {
            this.$message.error("批量删除失败");
          }
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      });
    },
    //点击之后打开弹窗
    handleAdd () {
      this.dialogFormVisible = true;
      //清空表单
      this.form = {};
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange (val) {
      this.pageNum = val;
      this.load();
    },
    //重置
    reset () {
      this.username = "";
      this.email = "";
      this.address = "";
      this.load();
    },
    //点击取消
    clear () {
      this.load()
      this.dialogFormVisible = false
    }
  },

};
</script>

<style lang="less" scoped>
// div {

// }
</style>